<template>
  <BasicModal
    width="60%"
    v-bind="$attrs"
    title="新增用户"
    @register="registerModal"
    @ok="handleOk"
    @cancel="handleCancel"
    :footer="null"
    :closeFunc="closeFunc"
  >
    <BasicForm @register="register" />
    <template #insertFooter>
      <a-button>insertFooter</a-button>
    </template>
    <template #centerFooter>
      <a-button>centerFooter</a-button>
    </template>
    <template #appendFooter>
      <a-button>appendFooter</a-button>
    </template>
    <!-- <template #footer>
      <a-button type="primary">通过</a-button>
      <a-button danger>不通过</a-button>
    </template> -->
  </BasicModal>
</template>
<script setup lang="ts">
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';
  import { ref } from 'vue';
  import { message, Modal } from 'ant-design-vue';

  const currentRecord = ref();
  const [registerModal, { changeLoading, changeOkLoading, closeModal }] = useModalInner((data) => {
    currentRecord.value = data;
    setFieldsValue(data);
  });
  const [register, { setFieldsValue, validate, resetFields }] = useForm({
    labelWidth: 100,
    baseColProps: {
      span: 24,
    },
    schemas: [
      {
        field: 'userName',
        component: 'Input',
        label: '用户名',
        required: true,
        // colProps: {
        //   span: 12,
        // },
        componentProps: {
          placeholder: '请输入用户名',
        },
      },
      {
        field: 'realName',
        component: 'Input',
        label: '姓名',
        // colProps: {
        //   span: 12,
        // },
        required: true,
        componentProps: {
          placeholder: '请输入姓名',
        },
      },
    ],
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });
  const handleOk = () => {
    validate().then((values) => {
      console.log(values);
      changeLoading(true);
      changeOkLoading(true);
      setTimeout(() => {
        resetFields();
        changeLoading(false);
        changeOkLoading(false);
        closeModal();
        message.success('新增成功');
      }, 2000);
    });
  };
  const handleCancel = () => {
    console.log('已关闭弹窗');
  };
  const closeFunc = () => {
    Modal.confirm({
      title: '确定关闭弹窗吗？',
      content: '关闭后未保存的数据将会丢失',
      onOk: () => {
        closeModal();
      },
    });
    return Promise.resolve(false);
  };
</script>
<style lang="less" scoped></style>
